﻿<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>模拟星空闪烁</title>
<script src="../js/jquery.min.js"></script>
<style>
 * {
	margin:0;
	padding:0;
}
html,body {
	width:100%;
	height:100%;
}
#canvas {
	display:block;
	background-color:#040c11;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>

<script>
(function(window) {
    if (window) {
        window.onload = function() {
            //获取canvas
            var canvas = document.getElementById('canvas');
            //获取画布
            var content = canvas.getContext('2d');

            var cw = innerWidth,
                ch = innerHeight;
            var dotsArr = [];
            canvas.width = cw;
            canvas.height = ch;

            (function fn() {
                window.onresize = function() {
                    cw = innerWidth;
                    ch = innerHeight;
                    canvas.width = cw;
                    canvas.height = ch;
                } //接收一个指向自己的函数，在事件触发的时候执行
            })();

            function Dot() {};

            Dot.prototype = {
                init: function() {
                    this.w = rand(0, cw);
                    this.h = rand(0, ch);
                    this.r = rand(0.2, 1.5);
                    this.speedX = rand(-1, 1);
                    this.speedY = rand(-1, 1);
                    this.color = 'white'
                },
                draw: function() {
                    content.fillStyle = this.color;
                    content.beginPath();
                    content.arc(this.w, this.h, this.r, 0, Math.PI * 2);
                    content.fill();
                },
                move: function() {
                    this.w += this.speedX;
                    this.h += this.speedY;
                    if (this.w < 0 || this.w > cw) {
                        this.speedX *= -1;
                    }
                    if (this.h < 0 || this.h > ch) {
                        this.speedY *= -1;
                    }
                    this.draw();
                },
                shine: function() {
                    this.r = rand(0.5, 1);
                    this.draw();
                }
            }

            //生成点对象
            function createDots(num) {
                if (num) {
                    for (var i = num; i > 0; i--) {
                        var dots = new Dot();
                        dots.init();
                        dots.draw();
                        dotsArr.push(dots);
                    }
                }
            }

            function Line() {};
            Line.prototype = {
                //星星之间的连线
                initStarLine: function() {
                    this.colorStar = '#6699cc';
                    this.colorStop = '#9966cc';
                },
                //鼠标与星星之间的连线
                initNewLine: function() {
                    this.colorStar = '#6699cc';
                    this.colorStop = '#ff6666';
                },
                drawLine: function(ow, oh, nw, nh) {
                    var dx = ow - nw;
                    var dy = oh - nh;
                    var d = Math.sqrt(dx * dx + dy * dy);
                    if (d < 60) {
                        var line = context.createLinearGradient(ow, oh, nw, nh);
                        context.beginPath();
                        context.moveTo(ow, oh); //线开始点,
                        context.lineTo(nw, nh); //线结束点
                        line.addColorStop(0, this.colorStar);
                        line.addColorStop(1, this.colorStop);
                        context.StrokeWidth = 1;
                        context.strokeStyle = line;
                        context.stroke();
                        context.restore();
                    }
                }
            }

            function rand(min, max) {
                return (Math.random() * (max - min)) + min;
            }

            createDots(400);

            // setTimeout(function(){    //递归调用setTimeout
            //     content.clearRect(0,0,cw,ch);
            //     for(var i of dotsArr){
            //         i.move();
            //         // for(var j=0;j<stars.length/2;j++ ){
            //         //     var line = new Line();
            //         //     line.initStarLine();
            //         //     line.drawLine(i.w,i.h,stars[j].w,stars[j].h);
            //         // }
            //     }
            //     setTimeout(arguments.callee,1000/5);
            // },1000/60);

            setInterval(function() {
                content.clearRect(0, 0, cw, ch);
                for (var i of dotsArr) {
                    // i.move();
                    i.shine();
                }
            }, 1000 / 5)
        }
    }
})(window)
</script>

</body>
</html>
